* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
  }

html{
    font-size: 16px;
}

// header开始

  .box {
    height: 50px;
    background-color: #222;
    .container {
      padding: 0;
      // 导航栏
      .navbar-header {
        .navbar-brand {
          padding: 0 15px;
          display: flex;
          align-items: center;
        }
      }
      .navbar {
        border: none;
        margin-bottom: 0;
      }
      .navbar-wrapper {
        .navbar-brand {
          padding: 0 15px;
          > img {
            width: 130px;
          }
        }
      }
    }
  }
  .carousel-inner{
      width: 100%;
      img{
          width: 100%;
      }
  }


  //内容
   main{
      // 头部
       .lr{
           .lr_row{
             margin-bottom: 6.25rem;
            //  热门
             .rm {
               position: absolute;
              width: 0;
              height: 0;
              border-top:5.25rem solid red ;
              border-right: 1.5rem solid red;
              border-bottom: 1.25rem solid transparent;
              border-left: 1.5rem solid red;
              span{
                font-size: 1.25rem;
                color: #fff;
                position: relative;
                top: -4.25rem;
                right: 0.55rem;
              }
          }
          // 左
               .l{
                   margin-top: 2.5rem;
                   img{
                     width: 21.25rem;
                   }
               }
              //  右
               .r{
                   .r_row{
                       .title{
                           text-align: right;
                           h2{
                             margin-top: 2.1875rem;
                           }
                           span{
                               color: #ababab;
                               font-size: .75rem;
                               line-height: 2.1rem;
                           }
                       }
                       .pic{
                        //  padding: 0;
                           margin-top: 1.875rem;
                           display: flex;
                           justify-content: space-between;
                       }
                   }
               }
              // 公主  
               .r{
                 .r_row{
                   .tl{
                     text-align: left ;
                     h2{
                       margin-top: 4.0625rem;
                     }
                   }
                 }
               }
             

           }
       }
      //  案例
       .al{
         .al_row{
           margin-bottom: 4.375rem;
          //  标题
           .title{
             padding-left: .9375rem;
           }
          //  左 中 右
            .l,.c,.r{
              a{
                font-size: .875rem;
                color: #000;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;

                img{
                  margin-top: 2.5rem;
                  margin-bottom: .875rem;
                }
              }
            }
            .r{
              p{
                margin: 0 auto;
                padding: 0;
              }
            }
         }
       }
   }

  //  尾部
   footer{
      //底部联系
      .bt{
        background-color: #3b3b3b;
          .bt_con{
            .bt_row{
             //  联系
              .txt{
                margin: 1.875rem 0;
                p{
                  color: #9798a0;
                  a{
                  color: #9798a0;
                  }
                  &:first-child{
                    font-size: .875rem;
                  }
                  &:last-child{
                    font-size: .75rem;
                  }
                }
              }
            }
           //  二维码
            .bt_pic{
              margin-top:2.3125rem;
                text-align: right;
              img{
                &:first-child{
                    &:hover+img{
                      display: block;
                    }
                }
                &:nth-child(3){
                  margin: 0 0.8rem;
                  &:hover +img {
                    display: block ;
                  }
                }
                &:nth-child(5){
                  &:hover+img{
                    display: block;
                  }
                }

               //  隐藏
                &:nth-child(2){
                 position: absolute;
                 bottom: 40px;
                 right: 69px;
                 display: none;
                }
                &:nth-child(4){
                 position: absolute;
                 bottom: 40px;
                 right: 15px;
                 display: none;
                }
                &:last-child{
                 position: absolute;
                 bottom: 40px;
                 right: -40px;
                 display: none;
                }
              }
            
            }
          }
      }
   }
  

  // ipad端 >= 768px   < 992px
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .navbar {
          margin-bottom: 0;
        }
        // 语言
        #navbar {
          .dropdown {
            position: absolute;
            top: 0;
            right: 80px;
          }
        }
      }
    }
    // 内容
    main{
      //猎刃头部
      .lr{
        .lr_row{
          // 左
          .l{
            img{
              width: 100%;
              margin-top: 5rem;
            }
          }
          // 右
          .r{
            .r_row{
              .pic{
                img{
                  width: 47%;
                }
              }
            }
          }
          
        }
      }
      // 底部案例
      .al{
        .al_row{
          .l,.c,.r{
             a{
               img{
                 width: 100%;
               }
             }
          }
        }
      }
    }
    footer{
       // 底部联系
       .bt{
        .bt_con{
          .bt_row{
           .ewm{
             width: 50%;
           } 
           img{
             &:nth-child(2){
               right:94px;
             }
             &:nth-child(4){
              right:40px;
            }
            &:last-child{
              right:-12px;
            }
           }
          }
        }
      }
    }
    
}


 // 移动端 < 768px
 @media screen and (max-width: 767px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .container {
          .navbar {
            margin-bottom: 0;
          }
          // 语言
          #navbar {
            position: absolute;
            left: 0;
            top: 50px;
            background-color: #222;
            width: 100vw;
          
          }
        }
      }
      
  }
  // 内容
  main{
    // 头部
    .lr{
      .lr_row{
        margin-bottom: 0;
        // 热门
       .rm{
         border-top: 3rem solid red;
         border-right: 1rem solid red;
         border-left: 1rem solid red;
         border-bottom: .8rem solid transparent;
         span{
           font-size: 1rem;
           top: -2.8rem;
         }
       }
      //  右
        .r{
          .r_row{
            .title{
              h2{
                text-align: center;
                margin:1rem 0 ;
                font-size: 1.2rem;

              }
              span{
                line-height: 1.5rem;
              }
        }
        .pic{
          margin-top: 1rem;
          img{
            width: 48%;

          }
        }
          }
          
        }
      }
    }
     // 底部案例
     .al{
      .al_row{
        margin-bottom: 0;
        .title{
          h2{
            font-size: 1.2rem;
          }
        }
        .l,.c,.r{
           a{
             img{
               margin-top: .875rem;
               width: 100%;
               margin-bottom: .4rem;
             }
           }
        }
        .r{
          padding: 0;
          p{
            padding: 0 .9375rem ;
          }
        }
      }
    }
  }
// 尾部
  footer{
     //底部联系
     .bt{
      .bt_con{
        .bt_row{
          .txt{
            margin: 1rem  0;
            p{
             
                margin-bottom: 0;
            }
          }
          .bt_pic{
            margin-top: 20px;
           .pic1{
             width: 20%;
           }
            .ewm{
              width:30%;
            }
            img{
              &:last-child{
                bottom: 28px;
                right: 3px;
              }
              &:nth-child(2){
                bottom:28px;
                right: 86px;
              }
              &:nth-child(4){
                bottom: 28px;
                right: 46px;
              }
            }
             
             
          }
        }
      }
    }
 }
}
  